<template>
	<view class="box bg-f7 padding-30">

		<view class="justifyContent-spaceBetween title-text fs-32 fw-b color-0 margin-b-20">
			社区医疗服务活动中心
			<text>一键报名</text>
		</view>
		<view class="bg-white padding-20 margin-b-40">
			<scroll-view scroll-y="true" @scrolltolower='scrolltolower'>
				<view>
					<freeClinic @goDetails='goDetails' :activityList="activityList"></freeClinic>
				</view>
			</scroll-view>
		</view>
		<view class="align-items-center title-text fs-32 fw-b color-0 margin-b-20">
			营养餐体验
			<text class="point-text">每次可获得5积分</text>
		</view>
		<view>
			<view v-for="item in list" :key="item.id" class="list-box padding-l-r-20 bg-white border-radio-14 margin-b-20">
				<view class="align-items-center">
					<view class='img-box'>
						<image :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="text-box margin-l-20">
						<view class="fs-30 fw-b color-0">{{item.title}}</view>
						<view class="fs-24 color-70">参与营养餐体验可获得</view>
						<view class="fs-24 color-70">{{item.score}}积分</view>
					</view>
				</view>
				<view class="line"></view>
				<view class="time fs-24 color-333 align-items-center justifyContent-spaceBetween" >
					活动时间：{{item.end_date}}
					<text @click="sign(item)">立即报名</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import freeClinic from '@/components/freeClinic/index.vue'
    import {serviceList ,playList,playDetail} from '@/api/service'
	export default {
		components: {
			freeClinic,
		},
		data() {
			return {
				activityList: [ ],
				list: [],
                page:1,
                payPage:1
			}
		},
        onLoad() {
            this.initList()
            this.getPlayList()
        },
		methods: {
            initList(){
                this.page =1
                this.list=[]
                this.getList()
            },
			scrolltolower(){
				console.log(5);
			},
			goDetails(item){
				console.log(item);
				playDetail({play_id:item.id}).then(res=>{
					
				})
			},
            getList(){
                let params = {
                    page:this.page,
                    limit:20,
                    type:1
                }
                playList(params ).then(res=>{
                   if (res.code==1){
                       this.activityList = this.activityList.concat(res.data)
                   }

                })
            },
            getPlayList(){
                let params = {
                    page:this.page,
                    limit:20,
                    type:2
                }
                playList(params).then(res=>{
                   if (res.code==1){
                       this.list = this.list.concat(res.data)
                   }
                })
            },
			sign(item){
				uni.navigateTo({
					url:'/pageA/service/confirm?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.title-text {
		text {
			font-size: 30rpx;
			font-weight: normal;
			color: #43ABC4;
			border-bottom: 1px solid #43ABC4;

			&.point-text {
				border-bottom: 0;
				margin-left: 20rpx;
			}
		}
	}

	.list-box {
        padding-top: 20rpx;
		.img-box {
			width: 180rpx;
			height: 140rpx;
			min-width: 180rpx;

			image {
				width: 100%;
				height: 100%;
			}
		}
        .time {
            height: 98rpx;
            text {
                width: 160rpx;
                height: 60rpx;
                background: #F8FEFF;
                border-radius: 31rpx;
                border: 1px solid #43ABC4;
                line-height: 60rpx;
                text-align: center;
                color: #43ABC4;
                font-size: 28rpx;
            }
        }
		.text-box {}
	}
</style>
